<template>
	<view>
		<view class="header">
			<view class="title">核销记录</view>
			<view class="tabs">
				<view 
					class="tab-item" 
					:class="{ active: type == 1 }"
					@click="screen"
					data-type="1"
				>翻牌抽奖</view>
				<view 
					class="tab-item" 
					:class="{ active: type == 2 }"
					@click="screen"
					data-type="2"
				>平台盲盒</view>
			</view>
		</view>

		<view class="content">
			<scroll-view scroll-y="true" @scrolltolower="lower" :style="{height: scrollViewHeight+'px'}" class="scroll-view">
				<view class="card" v-for="item in dataList" :key="item.id">
					<view class="card-header">
						<view class="user-info">
							<image :src="item.avatar_url" class="avatar"></image>
							<view class="user-detail">
								<view class="nickname">{{item.nickname}}</view>
								<view class="time">核销时间：{{item.confirm_time || '--'}}</view>
							</view>
						</view>
						<view class="status" :class="{'status-success': item.status == 2}">
							{{item.status == 2 ? '已核销' : '未核销'}}
						</view>
					</view>
					<view class="card-body">
						<view class="info-item">
							<text class="label">姓名</text>
							<text class="value">{{item.name || '--'}}</text>
						</view>
						<view class="info-item">
							<text class="label">手机号</text>
							<text class="value">{{item.phone || '--'}}</text>
						</view>
						<view class="info-item">
							<text class="label">订单编号</text>
							<text class="value">{{item.order_sn}}</text>
						</view>
						<view class="info-item">
							<text class="label">中奖编号</text>
							<text class="value">{{item.prize_sn}}</text>
						</view>
						<view class="info-item">
							<text class="label">奖品名称</text>
							<text class="value">{{item.prize_name}}</text>
						</view>
						<view class="info-item">
							<text class="label">核销人员</text>
							<text class="value">{{item.operator_nickname || '--'}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/clerk'
	import storage from '@/utils/storage'
	export default {
		components: {},
		data() {
			return {
				scrollViewHeight: '',
				dataList: [],
				page: 1,
				limit: 10,
				type: 1,
			}
		},
		onReady() {
			// 计算 scrollview 高度
			this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - 40 - uni.getMenuButtonBoundingClientRect().top
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			lower: function(e) {
				this.page = this.page + 1;
				this.getInfo();
			},
			getInfo: function() {
				api.confirmPrizeList({
					activityId: storage.get('activityId'),
					page: this.page,
					limit: this.limit,
					type: this.type
				}).then(res => {
					this.dataList = this.dataList.concat(res.data);
				})
			},
			screen(event) {
				this.type = event.target.dataset.type;
				this.page = 1;
				this.dataList = [];
				this.getInfo();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F7FB;
	}

	.header {
		background-color: #FFAC3E;
		width: 100%;
		height: 250rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		position: relative;
		
		.title {
			color: #fff;
			padding: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	
	.tabs {
		display: flex;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #FFAC3E;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #FFAC3E;
					border-radius: 2rpx;
				}
			}
		}
	}

	.content {
		padding: 20rpx;
		
		.scroll-view {
			width: 100%;
		}
		
		.card {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
			
			.card-header {
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				
				.user-info {
					display: flex;
					align-items: center;
					
					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						border: 2rpx solid #f0f0f0;
					}
					
					.user-detail {
						.nickname {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 10rpx;
							font-weight: 500;
						}
						
						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.status {
					font-size: 24rpx;
					color: #999;
					padding: 8rpx 24rpx;
					border-radius: 24rpx;
					background-color: #f5f5f5;
					font-weight: 500;
					
					&.status-success {
						color: #07c160;
						background-color: #e8f7f0;
						box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.1);
					}
				}
			}
			
			.card-body {
				padding: 24rpx;
				
				.info-item {
					display: flex;
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						width: 140rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.value {
						flex: 1;
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}
</style>